<template>
  <div class="gt-w-box-v"
    ref="gtWBoxCnt"
    v-debounce.scroll.stop="{fun: 'boxScroll'}">
    <div class="gt-w-box-v-wrap">
      <div v-for="(item,index) in data" :key="item.id" class="gt-w-box-v-tr">
        <div
          :data-id="item.id"
          v-debounce.mouseover.stop="{fun: 'setRowColor', args: {id: item.id}}"
          class="gt-w-box-v-tr-c">
          <!-- 无子集不需展开场景时父级行的样式 -->
          <div
            v-if="!(item.children && item.children.length)"
            v-debounce.mousemove.stop="showToast"
            v-debounce.mouseleave.stop="hideToast"
            :data-toast="index"
            :style="{width:item.width ? item.width + 'px':0,left:item.left ? item.left + 'px': 0,background:item.bgcColor}"
            class="gt-w-box-v-tr-c-item">
            <template v-if="item.params && item.params.showChild && item.params.children && item.params.children.length">
              <!-- 对任务进行时间分段场景 -->
              <template v-for="(pItem,pIndex) in item.params.children">
                <span
                  v-debounce.mousemove.stop="showToast"
                  v-debounce.mouseleave.stop="hideToast"
                  :key="`${index}-${pIndex}`"
                  :data-ptoast="pIndex"
                  :data-pchild="true"
                  :data-toast="`${index}-${pIndex}`"
                  :style="{width:pItem.width ? pItem.width + 'px':0,left:pItem.left ? pItem.left + 'px': 0,background:pItem.bgcColor}"
                  :class="{'show-process': pItem.showProcess}"
                  class="gt-w-box-v-tr-c-item-clomn">
                  <!-- 此处加上:data-piChild="true"方便浮窗统一控制  -->
                  <span v-if="pItem.per && pItem.showProcess" :style="{width:pItem.per,background:pItem.perBgColor}" :data-pichild="true" :data-ptoast="pIndex" class="process"></span>
                </span>
              </template>
            </template>
            <template v-else>
              <!-- 对任务不进行时间分段场景 -->
              <span v-if="item.params.per" :style="{width:item.params.per,background:item.perBgColor}" class="process"></span>
            </template>
          </div>
          <!-- 有子集需展开场景时父级行的样式 -->
          <div
            v-else
            v-debounce.mousemove.stop="showToast"
            v-debounce.mouseleave.stop="hideToast"
            :data-toast="index"
            :style="{width:item.width ? item.width + 'px': 0,left: item.left ? item.left + 'px':0,background:item.bgcColor}"
            class="gt-w-box-v-tr-c-item has-child">
            <template v-if="item.params && item.params.showChild && item.params.children && item.params.children.length">
              <!-- 对任务进行时间分段场景 -->
              <template v-for="(pItem,pIndex) in item.params.children">
                <span
                  v-debounce.mousemove.stop="showToast"
                  v-debounce.mouseleave.stop="hideToast"
                  :key="`${index}-${pIndex}`"
                  :data-ptoast="pIndex"
                  :data-pchild="true"
                  :data-toast="`${index}-${pIndex}`"
                  :style="{width:pItem.width ? pItem.width + 'px':0,left:pItem.left ? pItem.left + 'px': 0,background:pItem.bgcColor}"
                  :class="{'show-process': pItem.showProcess}"
                  class="gt-w-box-v-tr-c-item-clomn">
                  <!-- 此处加上:data-piChild="true"方便浮窗统一控制  -->
                  <span v-if="pItem.per && pItem.showProcess" :style="{width:pItem.per,background:pItem.perBgColor}" :data-pichild="true" :data-ptoast="pIndex" class="process"></span>
                </span>
              </template>
            </template>
            <template v-else>
              <!-- 对任务不进行时间分段场景 -->
              <span v-if="item.params.per" :style="{width:item.params.per,background:item.perBgColor}" class="process"></span>
            </template>
            <!-- <span
              v-if="item.params.per && item.children && item.children.length"
              :style="{borderLeftColor:item.perBgColor ? item.perBgColor : item.bgcColor ? item.bgcColor : '#606060'}"
              class="gt-w-box-v-tr-c-item-sjl"></span>
            <span
              v-if="item.params.per && item.children && item.children.length"
              :style="{borderRightColor: item.params.per && item.params.per.includes('100%') ? item.perBgColor ? item.perBgColor: item.bgcColor ? item.bgcColor : '#606060' : item.bgcColor ? item.bgcColor : '#909090'}"
              class="gt-w-box-v-tr-c-item-sjr"></span> -->
          </div>
        </div>
        <ganteview-item
          v-show="item.open"
          v-if="item.children && item.children.length"
          :headData="headData"
          :data="item.children">
          <!-- 坑，这个得有否则手动模式更新递归会不更新 -->
          <span class="visible"></span>
        </ganteview-item>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import Bus from '@front/common/bus.js'
export default {
  name: 'GanteviewItem',
  data () {
    return {
    }
  },
  props: {
    data: Array,
    headData: Object,
    uuId: String
  },
  beforeDestroy () {
    this.hideToast()
  },
  mounted () {
    this.getScrollTop()
  },
  methods: {
    boxScroll () {
      this.$nextTick(() => {
        const scrolled = this.$refs.gtWBoxCnt.scrollTop
        // eslint-disable-next-line no-undef
        Bus.$emit('gattViewScroll', { scrolled, uuid: this.uuId })
      })
    },
    getScrollTop () {
      Bus.$on('gattViewTableScroll', d => {
        this.$nextTick(() => {
          if (this.uuId === d.uuid) {
            this.$refs.gtWBoxCnt.scrollTop = d.scrolled
          }
        })
      })
    },
    setRowColor () {
      this.$emit('setRowColor', arguments[1].id)
    },
    showToast (e) {
      let target = e.target
      const pChild = target.dataset.pchild ? !!target.dataset.pchild : false
      const piChild = target.dataset.pichild ? !!target.dataset.pichild : false
      const pToast = pChild || piChild ? target.dataset.ptoast : 0
      if (e.target.nodeName === 'SPAN') {
        if (piChild) {
          target = e.target.parentNode.parentNode
        } else {
          target = e.target.parentNode
        }
      }
      const data = this.data[target.dataset.toast]
      if (data.params) {
        let toast = document.createElement('div')
        let addToast = true
        toast.setAttribute('class', 'gatt-toast-tips')
        if (document.getElementsByClassName('gatt-toast-tips')[0]) {
          toast = document.getElementsByClassName('gatt-toast-tips')[0]
          toast.style.display = 'block'
          addToast = false
        }
        let list = ''
        let count = 0
        for (const i in this.headData) {
          if (data.params[i] !== undefined && this.headData[i].showToast) {
            count++
            if (pChild || piChild) {
              // params 下有子集的场景
              const str = data.params.children && data.params.children.length ? data.params.children[pToast][i] : ''
              list += '<p>' + this.headData[i].value + '：' + str + '</p>'
            } else {
              list += '<p>' + this.headData[i].value + '：' + data.params[i] + '</p>'
            }
          }
        }
        toast.innerHTML = list
        let x = e.clientX + 15; let y = e.clientY + 15
        // 兼容横竖屏
        if (window.innerHeight >= window.innerWidth) {
          // 竖屏
          const w = window.innerHeight
          const contentH = count * 23 + 20
          if (x - contentH <= 0) {
            x = x - 55
          } else {
            x = x - contentH * 2 + 15
          }
          if (y + 250 >= w) {
            y = y - 250 + 50
          }
        } else {
          // 横屏
          const w = window.innerWidth
          const h = window.innerHeight
          const contentH = count * 23 + 20
          if (x + 250 >= w) {
            x = x - 250 - 15
          }
          if (y + contentH >= h) {
            y = y - contentH - 30
          }
        }
        toast.style.left = x + 'px'
        toast.style.top = y + 'px'
        if (addToast) {
          document.getElementsByTagName('body')[0].appendChild(toast)
        }
      }
    },
    hideToast () {
      if (document.getElementsByClassName('gatt-toast-tips') && document.getElementsByClassName('gatt-toast-tips')[0]) {
        document.getElementsByClassName('gatt-toast-tips')[0].style.display = 'none'
      }
    },
    detectOrient () {
      if (window.innerHeight >= window.innerWidth) {
        // 竖屏
        return false
      } else {
        // 横屏
        return true
      }
    }
  }
}
</script>
<style lang="stylus">
  .gatt-toast-tips{
    position: fixed;
    z-index: 10000;
    width: 250px;
    height: auto;
    font-size: 13px;
    border-radius: 3px;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    color: #fff;
    transition: all .5s ease;
    p{
      line-height: 23px;
    }
  }
  /*
 * 强制横屏显示：通过竖屏时旋转解决横屏问题
 *
 */
@media screen and  (orientation:  portrait){
  .gatt-toast-tips {
    -webkit-transform:rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
</style>
<style lang="stylus" scoped>
  .gt-w-box-v{
    .gt-w-box-v-wrap{
      position: relative;
      z-index:1;
      overflow: hidden;
      .gt-w-box-v-tr{
        position: relative;
        z-index:1;
        overflow:hidden;
        &-c{
          height: 39px;
          box-sizing: border-box;
          line-height: 40px;
          border-bottom: 1px solid #ebeef5;
          position: relative;
          z-index: 1;
          &:hover{
            background-color: rgba(245, 247, 250, 0.6);
          }
          &-item{
            position: absolute;
            height: 20px;
            border-radius: 3px;
            background: #909090;
            cursor: pointer;
            top: 50%;
            transform: translate(0, -50%);
            &-clomn{
              position: absolute;
              display: block;
              height: 100%;
              z-index: 2;
              &.show-process{
                height: 100%;
                clip-path: polygon(100% 0, 100% 100%, calc(100% - 4px) 60%, 4px 60%, 0 100%, 0 0);
              }
              .process{
                height: 27%!important;
              }
            }
            .process{
              position: absolute;
              left: 0;
              top: 0;
              width: 0;
              height: 100%;
              background: #606060;
              display: block;
              z-index: 1;
            }
            &-sjl{
              position: absolute;
              display: block;
              left: 0;
              top: 0;
              width: 0;
              height: 0;
              border-top: 2px solid transparent;
              border-left: 10px solid #909090;
              border-bottom: 12px solid transparent;
            }
            &-sjr{
              position: absolute;
              display: block;
              right: 0;
              top: 0;
              width: 0;
              height: 0;
              border-top: 2px solid transparent;
              border-right: 10px solid #909090;
              border-bottom: 12px solid transparent;
            }
            &.has-child{
              clip-path: polygon(100% 0, 100% 100%, calc(100% - 4px) 60%, 4px 60%, 0 100%, 0 0);
              border-radius: 0;
              height: 30px;
              .show-process{
                height: 70%;
                clip-path: polygon(100% 0, 100% 100%, calc(100% - 4px) 50%, 4px 50%, 0 100%, 0 0);
              }
            }
          }
        }
        .visible{
          display: none;
        }
      }
    }
  }
</style>
